<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue';
import FormRender from '../form-design/components/FormRender.vue';
import { ElMessage } from 'element-plus';
import { listFormDetail } from '@/api/workflow/form';
import { useRoute } from 'vue-router';

const route = useRoute();
const loading = ref(false);
const formJson = ref('');
const formData = ref({
  input56354: '123',
  radio103140: 1,
  select32879: 1,
  daterange71446: ['2025-09-05', '2025-09-23'],
  switch104110: true
});

onMounted(async () => {
  loading.value = true;
  const formId = route.query && route.query.formId;
  if (formId) {
    sessionStorage.setItem('app-token', route.query.token);
    try {
      const res = await listFormDetail(formId);
      formJson.value = res.data.content;
      loading.value = false;
    } catch (error) {
      console.log(error);
      loading.value = false;
    }
  }
});

const formRenderRef = ref(null);
async function onSubmit() {
  try {
    const data = await formRenderRef.value.getFormData();
    console.log(data);
    ElMessage.success('提交成功');
  } catch (error) {
    console.log(error);
  }
}
</script>

<template>
  <div class="webview">
    <template v-if="!loading">
      <form-render ref="formRenderRef" :data="formData" :json="formJson"></form-render>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </template>
  </div>
</template>

<style lang="scss" scoped></style>
